<template>
  <div class="tags">
    <el-tag
        v-for="(tag,index) in tags"
        :key="tag.path"
        :closable="tag.name !== 'home'"
        :effect="$route.name === tag.name ? 'dark':'plain'"
        @click="changeMenu(tag)"
        @close="handleClose(tag,index)"
        size="small"
    >
      {{tag.label}}
    </el-tag>
  </div>
</template>

<script>
import {mapState,mapMutations} from "vuex";

export default {
  name: "CommonTag",
  data(){
    return {}
  },computed:{
    ...mapState({
      tags:state => state.tab.tabsList
    })
  },
  // mounted() { // 通过生命周期检查代码
  //   console.log(this.$route.name,this.tags)
  // }
  methods:{
    ...mapMutations(['closeTag']),

    // 点击tag跳转功能
    changeMenu(tag){
        this.$router.push({ name:tag.name })
    },
    // 点击tag删除的功能
    handleClose(tag,index){
      // 调用store中的mutations
      this.closeTag(tag)
      const length = this.tags.length  // 获取当前位置
      // 删除之后的跳转逻辑
      if(tag.name !== this.$route.name){
        return
      }
      if(index === length){  // 表示删除最后一个
        this.$router.push({
          name:this.tags[index-1].name
        })
      }else {
        this.$router.push({  // 移动
          name:this.tags[index].name
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .tags{
    padding: 20px;
    .el-tag{
      margin-right: 15px;
      cursor: pointer;
    }
  }
</style>
